<template>
    <el-dialog :visible.sync="visible" width="400px" :show-close="false">
        <div slot="title" class="tilte">{{ formData.title }}</div>
        <div>{{ formData.message }}</div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false" class="cancel-style">{{ formData.cancelBtn }}</el-button>
            <el-button type="primary" @click="save" class="save-style">{{ formData.saveBtn }}</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'deletDialog',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false,
        },
        formData: {
            type: Object,
            default: () => {
                return {
                    title: '提示',
                    cancelBtn: '取消',
                    saveBtn: '确定',
                    message: '是否要删除设备',
                };
            },
        },
    },
    computed: {
        visible: {
            get() {
                return this.dialogVisible;
            },
            set(val) {
                this.$emit('update:dialogVisible', val);
            },
        },
    },
    data() {
        return {};
    },
    methods: {
        save() {
            this.$emit('submit');
        },
    },
    mounted() {},
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
    background: transparent;
    background-image: url('@/assets/img/dialog1.png');
    background-size: 100% 100%;

    background-repeat: no-repeat;
    z-index: 5999;

    .tilte {
        // background-image: url('@/assets/img/dialog-top.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 33px;
        color: #ffffff;
        line-height: 24px;
        // display: flex;
        // justify-content: flex-start;
        // align-items: center;
        font-size: 14px;
        font-weight: bold;
        padding: 0 0 0 20px !important;
    }

    .el-dialog__header {
        padding: 10px;
    }

    .el-dialog__body {
        padding: 20px 30px 0;
        color: #ffffff;
        padding: 0 20px 0 30px;
    }

    .el-form-item__label {
        color: #ffffff;
        font-size: 13px;
    }

    .el-dialog__footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .el-button {
        border: none;
        background: #021c34;
        box-shadow: inset 0px 0px 8px 0px #00c2ff;
        border-radius: 4px 4px 4px 4px;
        color: #ffffff;
        font-size: 12px;
        padding: 0px 15px !important;
        // line-height: 20px;
        height: 30px;
        border-radius: 3px 3px 3px 3px;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(43, 97, 137, 1), rgba(152, 211, 255, 1), rgba(43, 97, 137, 1)) 1 1;
    }

    .save-style {
        background: linear-gradient(180deg, #258cca 0%, #0e5fff 100%);
        border-image: linear-gradient(90deg, rgba(43, 97, 137, 1), rgba(152, 211, 255, 1), rgba(43, 97, 137, 1)) 1 1;
    }
}
</style>
